﻿@model ProfitModel
@{
    ViewBag.Title = "CSS";
}

<h2>CSS</h2>

<p>The css binding adds or removes one or more named CSS classes to the associated DOM element. This is useful, for example, to highlight some value in red if it becomes negative.</p>
<p><a href="http://knockoutjs.com/documentation/css-binding.html" target="_blank">http://knockoutjs.com/documentation/css-binding.html</a></p>

@Html.VisiTogglerFromPartial(CodeSamplePartials.CSS_VIEW_MODEL, Html.CreateVisiToggler("show the samples view model C# source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))
<br />
@Html.VisiTogglerFromPartial(CodeSamplePartials.CSS_CONTROLLER, Html.CreateVisiToggler("show the samples controller C# source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))


<h3>Sample #1</h3>

<p>Enter profile: <input @Html.KoAttrValue(m => m.Profit, KoValueUpdate.AfterKeyDown)/></p>

<p>Profit (negative is red, more than 10 is green): <span @Html.KoAttrText(m => m.Profit).KoAttrCSS("goodProfit", m => m.Profit > 10).KoAttrCSS("badProfit", m => m.Profit < 0)></span></p>

@Html.VisiTogglerFromPartial(CodeSamplePartials.CSS1, Html.CreateVisiToggler("show the sample source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))

<p>&nbsp;</p>
<p>Next &gt; @Html.ActionLink("Style", "Style", "Examples")</p>

@Model.ApplyBindingsScript(KoBindingOptions.IncludeData)